﻿@{
    ViewBag.Title = "Detail";
}

<link href="~/Content/general-orders.css" rel="stylesheet" />
<link href="~/Content/public-checkout.css" rel="stylesheet" />
<link href="~/Content/checkout-header.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.zh-CN.js"></script>

<div class="d-scroll-top-box hidden-print hidden-xs hidden-sm affix-top" style="display: none" aria-hidden="true"><span class="glyphicon glyphicon-arrow-up d-scroll-top-button"></span></div>
<div class="container d-main-container">
    <div class="row text-center background-white hidden">
        <h4>正在努力加载中... ╮(￣▽￣")╭</h4>
    </div><input type="hidden" name="issubmit" value="1">
    <div class="content">
        <div class="row text-center background-white hidden">
            <h5>您还没选购任何美食哦</h5>
            <h6><a href="#">(～￣▽￣)ノ 快点击这里选购吧</a></h6>
        </div>
        <div>
            <form class="form-horizontal" name="orderForm">
                <div class="col-xs-12 col-md-8 panel-left">
                    <div class="row info-title">
                        <div class="col-xs-7 col-md-6">
                            <div class="list-title">James bond</div>
                        </div>
                        <div class="col-xs-5 col-md-offset-2 col-md-3 text-center info-title">数量</div>
                    </div>
                    <hr>
                    <div class=info-block>
                        <div class="row list-item">
                            <div class="col-xs-7 col-md-6">
                                <div class="list-thumbnail"><img src="http://heifai.com/files/pilot/pilot_dish_002_typhoon_shelter_fried_chicken_palm.jpg"></div>
                                <div class="list-info">
                                    <div class="list-item-title">避风塘炒鸡中宝</div>
                                    <div class="list-item-price">￥30</div>
                                </div>
                            </div>
                            <div class="col-xs-5 col-md-offset-2 col-md-3 text-center list-item-quantity"><a href="javascript:;" onclick="quantitySubtract(this, 1)">&nbsp;-&nbsp;</a> <input min="1" value="1" />&nbsp; <a href="javascript:;" onclick="quantityAdd(this, 1)">&nbsp;+&nbsp;</a></div>
                        </div>
                        <div class="row list-item">
                            <div class="col-xs-7 col-md-6">
                                <div class="list-thumbnail"><img src="http://heifai.com/files/pilot/pilot_dish_002_typhoon_shelter_fried_chicken_palm.jpg"></div>
                                <div class="list-info">
                                    <div class="list-item-title">避风塘炒鸡中宝</div>
                                    <div class="list-item-price">￥30</div>
                                </div>
                            </div>
                            <div class="col-xs-5 col-md-offset-2 col-md-3 text-center list-item-quantity"><a href="javascript:;" onclick="quantitySubtract(this, 1)">&nbsp;-&nbsp;</a> <input min="1" value="1" />&nbsp; <a href="javascript:;" onclick="quantityAdd(this, 1)">&nbsp;+&nbsp;</a></div>
                        </div>
                    </div>
                    <div class="info-title hidden-md hidden-lg">备注</div>
                    <hr class="hidden-md hidden-lg">
                    <div class="row info-block hidden-md hidden-lg">
                        <div class="col-md-11">
                            <textarea placeholder="留言：口味、给餐厅留言"></textarea>
                            <!--[if lt IE 11]>（留言：口味、给餐厅留言）<![endif]-->
                        </div>
                    </div>
                    <div class="info-title row">
                        <div class="hidden-xs hidden-sm col-md-5">用餐时间</div>
                        <div class="col-md-7">备注</div>
                    </div>
                    <hr>
                    <div class="info-block row">
                        <div class="col-md-5">
                            <div class="input-append date" id="datetimepicker" date-language="zh-CN" data-date="@DateTime.Now.AddMinutes(30).ToString("yyyy-MM-dd HH:mm")" data-date-format="yyyy-mm-dd hh:ii">
                                <input class="form-control span2" size="16" type="text" value="@DateTime.Now.AddMinutes(30).ToString("yyyy-MM-dd HH:mm")">
                                <span class="add-on"><i class="icon-th"></i></span>
                            </div>
                        </div>
                        <div class="hidden-xs hidden-sm col-md-7">
                            <input class="form-control" placeholder=" 留言：口味、给餐厅留言" />
                            <!--[if lt IE 11]>（留言：口味、给餐厅留言）<![endif]-->
                        </div>
                    </div>

                    <div class="info-title">选择座位</div>
                    <hr>
                    <div class="row info-block">
                        <div class="form-group col-md-5">
                            <select class="form-control" id="table" name="table">
                                <option value="1">包间1</option>
                                <option value="2">包间2</option>
                                <option value="3">包间3</option>
                                <option value="4">桌子1</option>
                                <option value="5">桌子2</option>
                            </select>
                        </div>
                    </div>
                    <div class="info-title">用餐人信息</div>
                    <hr>
                    <div class="row info-block">
                        <div class="form-group col-xs-12 col-md-6">
                            <label for="name" class="col-xs-3 col-md-2">姓名：</label>
                            <div class="col-xs-9 col-md-10 has-feedback"><input class="form-control" id="name" name="name" placeholder="请输入姓名" required></div>
                        </div>
                        <div class="form-group col-xs-12 col-md-6">
                            <label for="phone" class="col-xs-3 col-md-2">电话：</label>
                            <div class="col-xs-9 col-md-10 has-feedback"><input class="form-control" id="phone" name="phone" placeholder="请输入手机号" required></div>
                        </div>
                    </div>
                    
                    <div class="info-title">付款方式</div>
                    <hr>
                    <div class="row info-block">
                        <div id="paymentType" class="col-md-11"><a class="payment payment-active">支付宝支付</a> <a class="payment">微信支付</a></div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-3 panel-right">
                    <div class="row hidden-xs hidden-sm">
                        <div class="col-md-11 info-block">
                            <div class="item-title">菜式（2）</div>
                            <div class="item-value">￥122</div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-xs-11 col-md-11 info-block">
                            <div class="item-title">应付总额</div>
                            <div class="totalPrice">￥122</div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-xs-12 col-md-12">
                            <button class="btn btn-submit">下单</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#datetimepicker').datetimepicker({
            language: "zh-CN",
            autoclose: true,
            startDate: "@DateTime.Now.AddMinutes(30).ToString("yyyy-MM-dd HH:mm")"
        });


        $("#paymentType a").click(function () {
            $("#paymentType a").removeClass("payment-active");
            $(this).addClass("payment-active");
        });
    });

    function quantitySubtract(obj, id) {
        var quantity = $(obj).next();
        if (parseInt(quantity.val()) == 1) {
            $(obj).parent().parent().remove();
        }
        else {
            quantity.val(parseInt(quantity.val() - 1));
        }
    }
    function quantityAdd(obj, id) {
        var quantity = $(obj).prev();
        quantity.val(parseInt(quantity.val()) + 1);
    }
</script>